<template>
	<view class="users-function">
		<view class="users-function-header">
			<view class="users-function-header-title">
				<text>我的功能</text>				
			</view>
		</view>
		<users-card :modelList="UsersCommonList">
			<template #top="img">
				<image :src="img.imgSrc" alt="" style="width: 45%;" mode="widthFix"></image>
			</template>
<!-- 					<template  #top="childNumber">
						<text>{{childNumber.number}}</text>
					</template> -->
		</users-card>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import UsersCard from '../../../../components/common/UsersCard/UsersCard.vue'
	
	// icon图片来自 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.dc64b3430&cid=30982
	
	const UsersCommonList = reactive([
		{
			imgSrc:"../../../../../static/images/my-news.png",
			number:0,
			title:"我的消息",
			pageSrc:"/pages/message/message"
		},
		{
			imgSrc:"../../../../../static/images/creation.png",
			number:0,
			title:"我的创作",
			pageSrc:"/pages/editor/editor"
		},
		{
			imgSrc:"../../../../../static/images/gift-bag.png",
			number:0,
			title:"我的礼包",
			pageSrc:""
		},
		{
			imgSrc:"../../../../../static/images/the-raise.png",
			number:0,
			title:"我的众测",
			pageSrc:""
		}
	])
</script>

<style lang="scss" scoped>
	.users-function{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.users-function-header{
			display: flex;
			width: 100%;
			.users-function-header-title{
				font-size: 40rpx;
				font-weight: 600;
				margin-left: 20rpx; ;
			}
		}
	}
</style>